<template>
  <div class="table-toolbar">
    <div class="flex items-center table-toolbar-left">
      <slot name="toolbar-left"></slot>
    </div>
    <div class="flex items-center table-toolbar-right">
      <slot name="toolbar-right"></slot>
      <n-icon size="24">
        <SettingsSuggestSharp />
      </n-icon>
    </div>
  </div>
  <div class="table-wrap">
    <NDataTable
      v-bind="getBindValues"
      :pagination="pagination"
      @update:page="updatePage"
      @update:page-size="updatePageSize"
    >
      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
        <slot :name="item" v-bind="data"></slot>
      </template>
    </NDataTable>
  </div>
</template>
<script lang="ts" setup>
import { SettingsSuggestSharp } from '@vicons/material'
import type { BasicTableProps } from './types/table'
import { NDataTable } from 'naive-ui'
import { defineProps, computed, ref, unref, toRaw } from 'vue'
import { usePagination } from './hooks/usePagination'
import { useDataSource } from './hooks/useDataSource'
import { useColumns } from './hooks/useColumns'
import { baseProps } from './props'

// 定义props
const props = defineProps({
  ...NDataTable.props,
  ...baseProps,
})

const emits = ['table-success', 'table-error', 'update:checked-row-keys']

const innerPropsRef = ref<Partial<BasicTableProps>>()

const tableData = ref({})

const getProps = computed(() => {
  return { ...props, ...unref(innerPropsRef) } as BasicTableProps
})

const { getPaginationInfo, setPagination } = usePagination(getProps)
const { getPageColumns } = useColumns(getProps)

// 翻页: page: 页码
const updatePage = (page: any) => {
  setPagination({ page: page })
}

// 每页数量
const updatePageSize = (size: any) => {
  setPagination({ page: 1, pageSize: size })
}

const { getDataSourceRef, getRowKey } = useDataSource(
  getProps,
  {
    getPaginationInfo,
    setPagination,
    tableData,
  },
  emits
)

// 组装表格属性
const getBindValues = computed(() => {
  const data = unref(getDataSourceRef)
  const propsData = {
    ...unref(getProps),
    // loading: unref(getLoading),
    columns: toRaw(unref(getPageColumns)),
    rowKey: unref(getRowKey),
    data,
    remote: true,
  }
  return propsData
})

// 分页对象
const pagination = computed(() => toRaw(unref(getPaginationInfo)))

console.log('BasicTable.pagination--->', pagination.value)

console.log('BasicTable.getBindValues-->', getBindValues.value)
</script>
<style lang="less" scoped>
.table-toolbar {
  display: flex;
  justify-content: space-between;
  padding: 0 0 16px 0;

  &-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;

    &-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 16px;
      font-weight: 600;
    }
  }

  &-right {
    display: flex;
    justify-content: flex-end;
    flex: 1;

    &-icon {
      margin-left: 12px;
      font-size: 16px;
      cursor: pointer;
      color: var(--text-color);

      :hover {
        color: #1890ff;
      }
    }
  }
}
</style>
